<script setup lang="ts">
import userconversation from '../components//userconversation.vue'
import responseconversation from '../components//responseconversation.vue'
import type {msglist} from "@/types/msglist";
import {ref} from "vue";
let collectedmessage=ref("");
let msglist=ref<meglist[]>([]);
function send(){
  if(collectedmessage.value!="" && collectedmessage.value!=" "){
    let newid=msglist.value.length + 1;
    msglist.value.push({
      id:newid,
      isuser:true,
      message:collectedmessage,
    })
    collectedmessage="";
    response(newid);
  }else {
    alert("请输入内容");
  }
}
function response(operateid:number){
  let newid=msglist.value.length + 1;
  let usermsg=msglist.value[operateid];
  msglist.value.push({
    id:newid,
    isuser:false,
    message:"“TCM”通常指的是传统中医（Traditional Chinese Medicine）的缩写。传统中医是中国的一种传统医学体系，它基于中国古代的哲学思想和医疗实践经验，发展出了独特的理论体系和治疗方法。传统中医强调阴阳平衡和五行相生相克的理论，认为人体是一个有机整体，内部脏腑、经络、气血等相互关联、相互影响。通过望、闻、问、切等四诊方法，中医可以诊断出人体的阴阳失衡、气血不和等病理状态，并采取相应的治疗方法，如针灸、推拿、拔罐、刮痧、中药等，以调整人体的阴阳平衡，恢复健康。除了治疗疾病，传统中医还注重预防和养生。通过调整饮食、作息、情绪等方面，中医可以帮助人们增强体质、提高免疫力，预防疾病的发生。",
  })
}
</script>

<template>
<div class="wrapper">
  <div class="upper">
    <div class="header">TCM中医针灸问答大模型</div>
    <div class="conversations">
      <div class="item" v-for="items of msglist">
        <template v-if="items.isuser">
          <userconversation :items="items"></userconversation>
        </template>
        <template v-else>
          <responseconversation :items="items"></responseconversation>
        </template>
      </div>
    </div>
  </div>
  <div class="lower">
    <textarea placeholder="输入您想问的问题" v-model="collectedmessage"></textarea>
    <div class="sendico">
      <button @click="send()">发送</button>
    </div>
  </div>
</div>
</template>

<style scoped>
.wrapper{
  min-width: 60vw;
  min-height: 100vh;
  max-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-left: #999 0.1vw solid;
}
.wrapper .upper{
  min-width: 60vw;
  min-height: 84vh;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: scroll;
}
.wrapper .upper .header{
  width:10vw;
  height: 4vh;
  border: none;
  border-radius: 3vh;
  display: flex;
  font-size: 0.8vw;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  margin-top: 1vh;
  position: fixed;
  border: #000 0.5px solid;
}
.wrapper .upper .conversations{
  width:50vw;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 4vh;
  row-gap: 1.5vh;
}
.wrapper .upper .conversations .item{
  height: auto;
  width: 50vw;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: left;
}
.wrapper .lower{
  height: 15vh;
  width: 49vw;
  border-radius: 1vw;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  position: fixed;
  border: none;
  bottom:0;
  margin-left: 6.7vw;
  margin-top: 2vh;
}
.wrapper .lower textarea{
  width: 49vw;
  height: 15vh;
  font-size: 0.85vw;
  border-radius: 1vw;
  resize: none;
  padding: 0.7vw;
  border:#000 0.5px solid;
}
.wrapper .lower .sendico{
  display: flex;
  width:4vw;
  height: 3vh;
  background-color:cadetblue;
  font-size: 0.85vw;
  border: none;
  border-radius: 1vw;
  justify-content: center;
  align-items: center;
  margin-left: 43vw;
  margin-top: -4vh;
}
.wrapper .lower .sendico button{
  display: flex;
  width:4vw;
  height: 3vh;
  color:cadetblue;
  font-size: 0.85vw;
  border: none;
  border-radius: 1vw;
  justify-content: center;
  align-items: center;
}
.wrapper .lower .sendico button:hover{
  background-color: greenyellow;
}
</style>